<template>
  <div class="app-container">
    <el-button
      type="primary"
      @click="addRole"
    >
     新增角色
    </el-button>

    <el-table
      :data="rolesList"
      style="width: 100%;margin-top:30px;"
      border
    >
      <el-table-column
        align="center"
        label="角色名称"
        width="220"
      >
        <template slot-scope="{row}">
          {{ row.roleName }}
        </template>
      </el-table-column>
      <el-table-column
        align="header-center"
        label="描述"
      >
        <template slot-scope="{row}">
          {{ row.description }}
        </template>
      </el-table-column>
      <el-table-column
        align="header-center"
        label="创建时间"
      >
        <template slot-scope="{row}">
          {{ row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="Operations"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="editRole(scope)"
          >
           修改角色
          </el-button>
          <el-button
            type="danger"
            size="small"

          >
          删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'修改角色':'新增角色'"
    >
      <el-form
        :model="role"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="Name">
          <el-input
            ref="input"
            v-model="role.roleName"
            placeholder="Role Name"
          />
        </el-form-item>
        <el-form-item label="Desc">
          <el-input
            v-model="role.description"
            :autosize="{minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="Role Description"
          />
        </el-form-item>
        <el-form-item label="Menus">
          <el-tree
            ref="tree"
            :check-strictly="checkStrictly"
            :data="routesTreeData"
            :props="defaultProps"
            :default-expanded-keys="default_expanded_keys"
            :default-checked-keys="default_checked_keys"
            show-checkbox
            node-key="id"
            class="permission-tree"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button
          type="danger"
          @click="reset"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="confirmRole"
        >
         确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import path from 'path'
import { cloneDeep } from 'lodash'
import { Component, Vue } from 'vue-property-decorator'
import { RouteConfig } from 'vue-router'
import {Input, Tree} from "element-ui"
import roleApi from '@/api/system/role'
import Icon from "@/views/icons/index.vue";
import menuApi from "@/api/system/menu";

const Role={
  id:'',
  roleName:'',
  description:'',
  createTime:'',
  ids:[]
}
@Component({
  name:'role'
})
export default class extends Vue {
  private role={...Role}
  private rolesList:Array<object> = []
  private dialogVisible = false
  private dialogType = 'new'
  private checkStrictly = false
  private defaultProps = {
    children: 'children',
    label: 'name'
  }
  private routesTreeData=[]

  //默认展开/选中节点
  private default_expanded_keys:never[]|Array<string>=[]
  private default_checked_keys:never[]|Array<string>=[]

   created() {
     this.getRoles();
     this.getMenu();
   }

   private async getRoles(){
   const {data}=await roleApi.getAllRoles();
   this.rolesList=data.items;
   }

   private async getMenu(){
    const {data} =await menuApi.getNestedTreeList();
    this.routesTreeData=data.menuList;
   }

  private addRole(){
    this.dialogVisible=true;
    //将回调延迟到下一轮dom更新时调用
    this.$nextTick(function (){
      this.$refs.input.focus();
    })
  }

  private editRole(scope:any){
    this.dialogVisible=true
    this.dialogType='edit';
    this.role=cloneDeep(scope.row);
    this.default_checked_keys=this.role.ids;
    this.default_expanded_keys=this.role.ids;
    //获取更新后的dom节点
    this.$nextTick(function (){
      (this.$refs.input as Input).focus();
    })
  }

  private async confirmRole() {
    this.default_checked_keys=(this.$refs.tree as Tree).getCheckedKeys();
    if(this.role.id){
      const {success}=await roleApi.updateById(this.role,this.default_checked_keys)
      if(success){
        for (let index = 0; index < this.rolesList.length; index++) {
          if (this.rolesList[index].id=== this.role.id) {
            this.rolesList.splice(index, 1, Object.assign({}, this.role))
            break
          }
        }
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
      }
    else {
        this.$message({
          type: 'error',
          message: '修改失败!'
        })
      }

    }
    else {
    await roleApi.addRole(this.role);
    this.getRoles();
    }
    this.reset();
  }

  private reset(){
    this.dialogVisible = false;
    this.dialogType = 'new';
    this.role = {...Role};
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
